<template>
  <div id="container"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  //创建地图实例
  var map = new window.BMapGL.Map('container')

  //设置中心点
  var point = new window.BMapGL.Point(116.404, 39.915)
  map.centerAndZoom(point, 15)
  //设置中心点坐标和缩放比例
  var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
  map.addControl(scaleCtrl)
  var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
  map.addControl(zoomCtrl)
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)
})
</script>

<style scoped>
#container {
  height: 100%;
}
</style>
